<template>
  <div class="creator-filter" :class="{ 'creator-filter--mobile': mobile }">
    <!-- 搜索框 -->
    <div class="creator-filter__search">
      <n-input
        v-model:value="searchKeyword"
        placeholder="搜索创作者昵称..."
        clearable
        size="medium"
        @keyup.enter="handleSearch"
        @clear="handleSearch"
      >
        <template #prefix>
          <n-icon><SearchOutline /></n-icon>
        </template>
        <template #suffix>
          <n-button
            text
            size="small"
            @click="handleSearch"
            :loading="loading"
          >
            搜索
          </n-button>
        </template>
      </n-input>
    </div>

    <!-- 筛选器组 -->
    <div class="creator-filter__filters">
      <!-- 创作者类型筛选 -->
      <div class="creator-filter__group">
        <label class="creator-filter__label">创作者类型</label>
        <n-select
          v-model:value="selectedCreatorType"
          :options="creatorTypeOptions"
          placeholder="选择类型"
          clearable
          size="medium"
          @update:value="handleFilterChange"
        />
      </div>

      <!-- 分类筛选 -->
      <div class="creator-filter__group">
        <label class="creator-filter__label">分类</label>
        <n-select
          v-model:value="selectedCategory"
          :options="categoryOptions"
          placeholder="选择分类"
          clearable
          size="medium"
          :loading="loading"
          @update:value="handleFilterChange"
        />
      </div>

      <!-- 状态筛选 -->
      <div class="creator-filter__group">
        <label class="creator-filter__label">状态</label>
        <n-select
          v-model:value="selectedStatus"
          :options="statusOptions"
          placeholder="选择状态"
          clearable
          size="medium"
          @update:value="handleFilterChange"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="creator-filter__actions">
        <n-button
          type="primary"
          size="medium"
          @click="handleSearch"
          :loading="loading"
        >
          <template #icon>
            <n-icon><SearchOutline /></n-icon>
          </template>
          筛选
        </n-button>
        
        <n-button
          size="medium"
          @click="handleReset"
        >
          <template #icon>
            <n-icon><RefreshOutline /></n-icon>
          </template>
          重置
        </n-button>
      </div>
    </div>

    <!-- 快速筛选标签 -->
    <div v-if="!mobile" class="creator-filter__quick-filters">
      <span class="creator-filter__quick-label">快速筛选：</span>
      <n-tag
        v-for="tag in quickFilterTags"
        :key="tag.key"
        :type="tag.active ? 'primary' : 'default'"
        checkable
        :checked="tag.active"
        size="small"
        @update:checked="(checked: boolean) => handleQuickFilter(tag.key, checked)"
      >
        {{ tag.label }}
      </n-tag>
    </div>

    <!-- 移动端折叠筛选器 -->
    <div v-if="mobile" class="creator-filter__mobile-toggle">
      <n-button
        text
        size="small"
        @click="showMobileFilters = !showMobileFilters"
      >
        <template #icon>
          <n-icon>
            <ChevronDownOutline v-if="!showMobileFilters" />
            <ChevronUpOutline v-else />
          </n-icon>
        </template>
        {{ showMobileFilters ? '收起筛选' : '展开筛选' }}
      </n-button>
    </div>

    <!-- 移动端筛选器内容 -->
    <n-collapse-transition :show="!mobile || showMobileFilters">
      <div v-if="mobile" class="creator-filter__mobile-content">
        <div class="creator-filter__mobile-tags">
          <n-tag
            v-for="tag in quickFilterTags"
            :key="tag.key"
            :type="tag.active ? 'primary' : 'default'"
            checkable
            :checked="tag.active"
            size="small"
            @update:checked="(checked: boolean) => handleQuickFilter(tag.key, checked)"
          >
            {{ tag.label }}
          </n-tag>
        </div>
      </div>
    </n-collapse-transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { 
  SearchOutline, 
  RefreshOutline,
  ChevronDownOutline,
  ChevronUpOutline
} from '@vicons/ionicons5'
import type { CreatorFilter as CreatorFilterType } from '@/types/creators'
import { CREATOR_TYPES, CREATOR_STATUS } from '@/api/creators'

interface Props {
  categories: string[]
  loading?: boolean
  mobile?: boolean
}

interface Emits {
  (e: 'filter-change', filter: Partial<CreatorFilterType>): void
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  mobile: false
})

const emit = defineEmits<Emits>()

// 筛选状态
const searchKeyword = ref('')
const selectedCreatorType = ref<number | null>(null)
const selectedCategory = ref<string | null>(null)
const selectedStatus = ref<string | null>(null)
const showMobileFilters = ref(false)

// 创作者类型选项
const creatorTypeOptions = computed(() => [
  { label: '全部类型', value: 0 },
  ...Object.entries(CREATOR_TYPES).map(([key, value]) => ({
    label: value.label,
    value: parseInt(key)
  }))
])

// 分类选项
const categoryOptions = computed(() => [
  { label: '全部分类', value: '' },
  ...props.categories.map(category => ({
    label: category,
    value: category
  }))
])

// 状态选项
const statusOptions = computed(() => [
  { label: '全部状态', value: '' },
  ...Object.entries(CREATOR_STATUS).map(([key, value]) => ({
    label: value.label,
    value: key
  }))
])

// 快速筛选标签
const quickFilterTags = ref([
  { key: 'recommended', label: '推荐创作者', active: false },
  { key: 'live_streamer', label: '直播主播', active: false },
  { key: 'video_creator', label: '视频博主', active: false },
  { key: 'high_follower', label: '高粉丝数', active: false },
  { key: 'active_creator', label: '活跃创作者', active: false }
])

// 处理搜索
const handleSearch = () => {
  emitFilterChange()
}

// 处理筛选变化
const handleFilterChange = () => {
  emitFilterChange()
}

// 处理重置
const handleReset = () => {
  searchKeyword.value = ''
  selectedCreatorType.value = null
  selectedCategory.value = null
  selectedStatus.value = null
  
  // 重置快速筛选标签
  quickFilterTags.value.forEach(tag => {
    tag.active = false
  })
  
  emitFilterChange()
}

// 处理快速筛选
const handleQuickFilter = (key: string, checked: boolean) => {
  const tag = quickFilterTags.value.find(t => t.key === key)
  if (tag) {
    tag.active = checked
    
    // 根据快速筛选设置对应的筛选条件
    switch (key) {
      case 'live_streamer':
        selectedCreatorType.value = checked ? 1 : null
        break
      case 'video_creator':
        selectedCreatorType.value = checked ? 2 : null
        break
      case 'active_creator':
        selectedStatus.value = checked ? '1' : null
        break
    }
    
    emitFilterChange()
  }
}

// 发送筛选变化事件
const emitFilterChange = () => {
  const filter: Partial<CreatorFilterType> = {
    keyword: searchKeyword.value.trim(),
    creator_type: selectedCreatorType.value || 0,
    category: selectedCategory.value || '',
    status: selectedStatus.value || ''
  }
  
  // 添加快速筛选的特殊处理
  const activeQuickFilters = quickFilterTags.value.filter(tag => tag.active)
  
  emit('filter-change', filter)
}

// 监听分类数据变化
watch(() => props.categories, () => {
  // 如果当前选中的分类不在新的分类列表中，则清空选择
  if (selectedCategory.value && !props.categories.includes(selectedCategory.value)) {
    selectedCategory.value = null
    emitFilterChange()
  }
})
</script>

<style scoped>
.creator-filter {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.creator-filter--mobile {
  gap: 12px;
}

.creator-filter__search {
  width: 100%;
}

.creator-filter__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}

.creator-filter__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creator-filter__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--n-text-color);
}

.creator-filter__actions {
  display: flex;
  gap: 8px;
}

.creator-filter__quick-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--n-border-color);
}

.creator-filter__quick-label {
  font-size: 13px;
  color: var(--n-text-color-2);
  white-space: nowrap;
}

.creator-filter__mobile-toggle {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  border-top: 1px solid var(--n-border-color);
}

.creator-filter__mobile-content {
  padding-top: 12px;
}

.creator-filter__mobile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .creator-filter__filters {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .creator-filter__actions {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .creator-filter__quick-filters {
    display: none;
  }
}

@media (max-width: 480px) {
  .creator-filter__actions {
    flex-direction: column;
  }
}
</style>
